<template>
    <div v-show="loadingState">
        <img :src="imSrc">
    </div>
</template>
<script>
export default {
  props: {
    loadingState: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      img: [
        require("../../../static/loading/logo_00000.png"),
        require("../../../static/loading/logo_00001.png"),
        require("../../../static/loading/logo_00002.png"),
        require("../../../static/loading/logo_00003.png"),
        require("../../../static/loading/logo_00004.png"),
        require("../../../static/loading/logo_00005.png"),
        require("../../../static/loading/logo_00006.png"),
        require("../../../static/loading/logo_00007.png"),
        require("../../../static/loading/logo_00008.png"),
        require("../../../static/loading/logo_00009.png"),
        require("../../../static/loading/logo_00010.png"),
        require("../../../static/loading/logo_00011.png"),
        require("../../../static/loading/logo_00012.png"),
        require("../../../static/loading/logo_00013.png"),
        require("../../../static/loading/logo_00014.png"),
        require("../../../static/loading/logo_00015.png"),
        require("../../../static/loading/logo_00016.png"),
        require("../../../static/loading/logo_00017.png"),
        require("../../../static/loading/logo_00018.png"),
        require("../../../static/loading/logo_00019.png"),
        require("../../../static/loading/logo_00020.png"),
        require("../../../static/loading/logo_00021.png"),
        require("../../../static/loading/logo_00022.png"),
        require("../../../static/loading/logo_00023.png"),
        require("../../../static/loading/logo_00024.png"),
        require("../../../static/loading/logo_00025.png"),
        require("../../../static/loading/logo_00026.png"),
        require("../../../static/loading/logo_00027.png"),
        require("../../../static/loading/logo_00028.png"),
        require("../../../static/loading/logo_00029.png"),
        require("../../../static/loading/logo_00030.png"),
        require("../../../static/loading/logo_00031.png")
      ],
      i: 0,
      imSrc: ""
    };
  },
  methods: {
    animateIms() {
      let size = this.img.length;
      var i = this.i;
      this.timer = setInterval(() => {
        i++;
        if (i >= size) {
          i = 0;
        }
        this.imSrc = this.img[i];
      }, 20);
    }
  },
  mounted() {
    this.animateIms();
  },
  watch: {
    loadingState(val, oldVal) {
      if (!val) {
        clearInterval(this.timer);
      } else {
        this.animateIms();
      }
    }
  }
};
</script>
<style scoped>
div {
  display: flex;
  justify-content: center;
}
img {
  width: 1.8rem;
  height: 1.8rem;
}
</style>


